<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('800px')"
    :visible="visible"
    @open="open"
    @close="close"
  >
    <template slot="title">
      <span class="mr-10 text-color">{{ $t('EDIT_CABLE_CLASS') }}</span>
      <el-popover width="200" trigger="hover" :content="$t('EDIT_CABLE_CLASS_TIPS')">
        <i slot="reference" class="iconfont icon-AFSwenhao" />
      </el-popover>
    </template>
    <el-table
      :key="tableData.length"
      ref="tableBox"
      class="w-100 mb-10"
      :data="tableData"
      height="100%"
      size="mini"
      border
    >
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column type="index" :label="$t('RANK_NUMBER')" align="center" width="200">
        <template v-slot="scope">
          {{ $t(levelList[scope.$index].label) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('LEVEL_NAME')" prop="cableLevel">
        <template v-slot="scope">
          <el-input v-model.trim="scope.row.label" maxlength="32" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('OPERATE')" class-name="operate-cell" width="80">
        <template v-slot="scope">
          <i
            v-if="scope.$index === tableData.length - 1 && tableData.length < 8"
            class="el-icon-plus mr-10"
            @click="addRow"
          />
          <i
            v-if="scope.$index > 3 && scope.$index === tableData.length - 1"
            class="el-icon-minus"
            @click="delRow(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <template v-slot:footer>
      <el-button size="mini" @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button size="mini" type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import bizDictApi from '@/api/basebiz/BizDictApi'
  import CableApi from '@/api/oen/CableApi'
  import { deepClone } from '@/utils/common'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tableData: [],
        levelList: [
          { label: 'LEVEL_ONE', value: 'BACKBONE' },
          { label: 'LEVEL_TWO', value: 'TRUNK' },
          { label: 'LEVEL_THREE', value: 'RELAY' },
          { label: 'LEVEL_FOUR', value: 'WIRING' },
          { label: 'LEVEL_FIVE', value: 'FIVE' },
          { label: 'LEVEL_SIX', value: 'SIX' },
          { label: 'LEVEL_SEVEN', value: 'SEVEN' },
          { label: 'LEVEL_EIGHT', value: 'EIGHT' }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictList', 'customDictList']),
      dictCableLevelList() {
        return this.customDictList.filter(i => i.type === 'CABLE_LEVEL')
      }
    },
    created() {
      this.$store.dispatch('getCustomDict')
    },
    methods: {
      open() {
        this.tableData = deepClone(this.dictCableLevelList)
      },
      addRow() {
        const sort = this.tableData.length
        const code = this.levelList[sort].value
        this.tableData.push({
          value: code,
          label: '',
          code: code,
          name: '',
          sort: sort + 1,
          description: null
        })
      },
      async delRow(row) {
        console.log('row', row)
        const res = await CableApi.getByCableLevel({ levelList: [row.value] })
        if (res && res[row.value]) {
          this.$message.error(this.$t('CANNOT_DEL_CABLE_LEVEL'))
          return
        }
        this.tableData.pop()
      },
      // 保存逻辑网段修改
      async save() {
        let nullField = false
        let duplicateField = false
        const curIds = []
        const modList = []
        this.tableData.forEach((i, index) => {
          i.name = i.label.trim()
          if (i.name === '') {
            nullField = true
          }
          const labelIndex = this.tableData.findIndex(j => j.label === i.label)
          if (index !== labelIndex) {
            duplicateField = true
          }
          const item = {
            ...i,
            id: this.dictCableLevelList[index] ? this.dictCableLevelList[index].id : null,
            type: 'CABLE_LEVEL',
            update: i.sort > 4,
            parentId: 'CABLE_LEVEL',
            children: null
          }
          modList.push(item)
          item.id && curIds.push(item.id)
        })
        if (nullField) {
          this.$message.error(this.$t('CABLE_NAME_CANNOT_EMPTY'))
          return
        }
        if (duplicateField) {
          this.$message.error(this.$t('CABLE_NAME_CANNOT_DUPLICATE'))
          return
        }
        console.log('saveCableLevel', modList)
        try {
          const delIds = this.dictCableLevelList.filter(i => !curIds.includes(i.id)).map(i => i.id)
          if (delIds.length) {
            await bizDictApi.del({ ids: delIds.toString() })
          }
          bizDictApi.saveBatch(modList).then(res => {
            this.$store.dispatch('getCustomDict')
            this.close(true)
          })
        } catch (error) {
          this.$message.error(this.$t('SAVEFAILED'))
        }
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style></style>
